<%@ page pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html lang="zh">
    <head>
        <meta charset="utf-8" />
        <title>MarkDown文件在线查看</title>
        <link rel="stylesheet" href="${ctxPath }/js/system/editor.md/css/style.css" />
        <link rel="stylesheet" href="${ctxPath }/js/system/editor.md/css/editormd.preview.css" />
        <style>
            body {padding: 40px;}
            
            #layout > header, .btns {
                width: auto;
            }
            
            #sidebar {
                width: 400px;
                height: 100%;
                position: fixed;
                top: 0;
                right: 0;
                overflow: hidden;
                background: #fff;
                z-index: 100;
                padding: 18px; 
                border: 1px solid #ddd;
                border-top: none;
                border-bottom: none;
            }
            
            #sidebar:hover {
                overflow: auto;
            }
            
            #sidebar h1 {
                font-size: 16px;
            }
            
            #custom-toc-container {
                padding-left: 0;
            }
            
            #test-editormd-view, #test-editormd-view2 {
                padding-left: 0;
                padding-right: 430px;
                margin: 0;
            }
        </style>
    </head>
    <body>
        <div id="layout">
            <div id="sidebar">
                <h1>目录</h1>
                <div class="markdown-body editormd-preview-container" id="custom-toc-container">#custom-toc-container</div>
            </div>
            <div id="test-editormd-view">
<!-- 内容开始 -->
                <textarea style="display:none;">
[TOCM]

[TOC]

 #### 示例
![](https://img.shields.io/badge/release-1.2.3-blue.svg)
- TeX (Based on KaTeX);
- Emoji;
- Task lists;
- HTML tags decode;
- Flowchart and Sequence Diagram;

#### Editor.md directory

       editor.md/
            lib/
            css/
            scss/
            tests/
            fonts/
            images/
            plugins/
            examples/
            languages/     
            editormd.js
            ...

```html
<!-- English -->
<script src="../dist/js/languages/en.js"></script>

<!-- 繁體中文 -->
<script src="../dist/js/languages/zh-tw.js"></script>
```

				</textarea>
<!-- 内容结束 -->
            </div>
        </div>
        <script src="${ctxPath }/js/lib/jquery-1.10.2.min.js"></script>
        
        <script src="${ctxPath }/js/system/editor.md/lib/marked.min.js"></script>
        <script src="${ctxPath }/js/system/editor.md/lib/prettify.min.js"></script>
        
        <script src="${ctxPath }/js/system/editor.md/lib/raphael.min.js"></script>
        <script src="${ctxPath }/js/system/editor.md/lib/underscore.min.js"></script>
        <script src="${ctxPath }/js/system/editor.md/lib/sequence-diagram.min.js"></script>
        <script src="${ctxPath }/js/system/editor.md/lib/flowchart.min.js"></script>
        <script src="${ctxPath }/js/system/editor.md/lib/jquery.flowchart.min.js"></script>
        <script src="${ctxPath }/js/system/editor.md/editormd.min.js"></script>
        <script type="text/javascript">
			var testEditor;

            $(function() {
            	var url = "${param.url}";
            	if(url){
					$.get(url, function(markdown) {
	                    
						testEditormdView = editormd.markdownToHTML("test-editormd-view", {
							markdown        : markdown ,//+ "\r\n" + $("#append-test").text(),
	                        //htmlDecode      : true,       // 开启 HTML 标签解析，为了安全性，默认不开启
	                        htmlDecode      : "style,script,iframe",  // you can filter tags decode
	                        //toc             : false,
	                        tocm            : true,    // Using [TOCM]
	                        tocContainer    : "#custom-toc-container", // 自定义 ToC 容器层
	                        //gfm             : false,
	                        //tocDropdown     : true,
	                        // markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签
	                        emoji           : true,
	                        taskList        : true,
	                        tex             : true,  // 默认不解析
	                        flowChart       : true,  // 默认不解析
	                        sequenceDiagram : true,  // 默认不解析
	                        onload : function() {
	                            //this.watch();
	                            //this.setMarkdown("###test onloaded");
	                            //testEditor.setMarkdown("###Test onloaded");
	                            alert("onloaded");
	                            console.log("onloaded =>", this, this.id, this.settings);
	                        }
						});
						// 超链接改为新页面打开
						$('a[href^="http"]').each(function(i, n){
							var $this = $(n);
							var target = $this.attr("target");
							if(!target){
								$this.attr("target", "_blank");
							}
						});
	                    
	                });
            		
            	} else {
	            	testEditor = editormd.markdownToHTML("test-editormd-view", {
						tocm            : true,    // Using [TOCM]
	                    tocContainer    : "#custom-toc-container", // 自定义 ToC 容器层
	   					htmlDecode      : "style,script,iframe",  // you can filter tags decode
	         			emoji           : true,
	     				taskList        : true,
	        			tex             : true,  // 默认不解析
	         			flowChart       : true,  // 默认不解析
	         			sequenceDiagram : true,  // 默认不解析
	                 });
            	}
                
            });
        </script>
    </body>
</html>
